<template>
  <a-modal
    :title="form && form.id ? disabled?'查看申请':'修改申请' : '新建申请'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">

        <a-form-model-item  ref="seal_type" label="公章类型" prop="seal_type">
          <a-select :disabled="disabled" placeholder="请选公章类型" v-model="form.seal_type">
            <template v-for="item in seal_type_em">
              <a-select-option :value="item.id" :key="'seal_type'+item.id">
                {{ item.name }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-model-item>

        <a-form-model-item ref="mode"  label="申请方式" prop="mode">
          <a-select :disabled="disabled" placeholder="请选择申请方式" v-model="form.mode">
            <template v-for="item in mode_em">
              <a-select-option :value="item.id" :key="'mode'+item.id">
                {{ item.name }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-model-item>

      <a-form-model-item ref="application_time" label="申请时间" prop="application_time">
          <a-date-picker class="full" :disabled="disabled"  v-model="form.application_time" placeholder="请选择申请时间"/>
      </a-form-model-item>

       <a-form-model-item ref="return_time" label="归还时间" prop="return_time">
          <a-date-picker class="full" :disabled="disabled"  v-model="form.return_time" placeholder="请选择归还时间"/>
      </a-form-model-item>

        <a-form-model-item ref="reason" label="申请事由" prop="reason">
          <a-textarea placeholder="申请事由" :rows="6"  :disabled="disabled"  v-model="form.reason"/>
        </a-form-model-item>
        <a-form-model-item ref="refuseReason" label="拒绝原因" prop="refuseReason" v-if="form.approval_status === '2'">
          <a-textarea :rows="6"  :disabled="disabled"  v-model="form.refuseReason"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="modal-footer" slot="footer">
      <a-button @click="() => { $emit('cancel') }">
        取消
      </a-button>
      <template v-if="(!form.order_status || form.order_status === '1' || form.order_status === '3') && !disabled">
        <a-button ghost type="danger" @click="handleOk('1')">
          暂存
        </a-button>
        <a-button type="primary" @click="handleOk('2')">
          提交
        </a-button>
      </template>
    </div>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      seal_type_em:[
        {id:1,name:"公司公章"},
        {id:2,name:"财务章"},
        {id:3,name:"法人章"},
        {id:4,name:"合同章"},
        {id:5,name:"名章"},
        {id:6,name:"发票"},
      ],
      mode_em:[
        {id:1,name:"带走"},
        {id:2,name:"现在盖"},
      ],
      form: {
        id: undefined,
        reason: undefined,
        seal_type:undefined,
        mode:undefined,
        refuseReason: undefined,
        application_time:undefined,
        return_time:undefined,
      },
      disabled: false,
      rules: {
        reason: [
          { required: true, message: '请输入申请事由', trigger: 'blur' },
        ],
        seal_type:[
           { required: true, message: '请输入公章类型', trigger: 'change'  },
        ],
        mode:[
          { required: true, message: '请输入申请方式' , trigger: 'change' },
        ],
        application_time:[
          { required: true, message: '请输入申请时间' , trigger: 'change' },
        ],
         return_time:[
          { required: true, message: '请输入归还时间' , trigger: 'change' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
      this.form.money = this.form.money ? parseInt(this.form.money) : 0;
      this.form.mode = this.form.mode?parseInt(this.form.mode):undefined;
      this.form.seal_type = this.form.seal_type?parseInt(this.form.seal_type):undefined;
    })
  },
  methods: {
    handleOk(tag) {
      console.log('ok');
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.order_status = tag;
          this.form.money = this.form.money.toString();
          this.form.seal_type = this.form.seal_type.toString();
          this.form.mode = this.form.mode.toString();
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        reason: undefined,
        seal_type:undefined,
        mode:undefined,
        refuseReason: undefined,
        application_time:undefined,
        return_time:undefined,
      };
    },
  }
}
</script>
